"use client";

import React, { useState } from "react";
import {
  LockOutlined,
  UserOutlined,
  EyeOutlined,
  EyeInvisibleOutlined,
  LeftOutlined,
} from "@ant-design/icons";
import { Form, Input, Button, Checkbox, Modal } from "antd";
import { useRouter } from "next/navigation";
import { useUser } from "../context/userContext";
import api from "../utils/api";
import FileCard from "@/components/FileCard";
import styles from "@/components/Font.module.css";

export default function LoginPage() {
  const [loading, setLoading] = useState(false);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [errorModalVisible, setErrorModalVisible] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");
  const [adminChoiceModalVisible, setAdminChoiceModalVisible] = useState(false);
  const router = useRouter();
  const { setUser } = useUser();

  const onFinish = async (values) => {
    setLoading(true);

    const requestData = {
      password: values.password,
      email: values.username,
      username: values.username,
    };

    console.log(requestData);
    try {
      const response = await api.post("/users/login", requestData);
      console.log(response);
      if (response.status === 201) {
        const { access_token, user_id } = response.data;

        if (!access_token || !user_id) {
          setErrorModalVisible(true);
          setErrorMessage("登录失败，服务器返回数据异常");
          return;
        }

        const userInfoResponse = await api.get("/users/info", {
          params: {
            id: String(user_id),
          },
        });

        if (userInfoResponse.status === 200) {
          const user = userInfoResponse.data;

          const userData = {
            id: user_id,
            username: user.username,
            email: user.email,
            display_name: user.display_name,
            bio: user.bio,
            role: user.role,
            icon: user.icon,
            access_token: access_token,
            password: requestData.password,
          };

          setUser(userData);
          localStorage.setItem("user", JSON.stringify(userData));

          if (userData.role === "admin") {
            setAdminChoiceModalVisible(true);
          } else {
            router.push("/homepage/home");
          }
        } else {
          setErrorModalVisible(true);
          setErrorMessage("获取用户信息失败，请稍后再试");
        }
      } else {
        setErrorModalVisible(true);
        setErrorMessage("登录失败，请稍后再试");
      }
    } catch (error) {
      if (error.response) {
        if (error.response.status === 401) {
          setErrorModalVisible(true);
          setErrorMessage("密码错误");
        } else if (error.response.status === 404) {
          setErrorModalVisible(true);
          setErrorMessage("用户不存在");
        } else {
          setErrorModalVisible(true);
          setErrorMessage(
            error.response.data.message || "服务器错误，请稍后再试"
          );
        }
      } else if (error.request) {
        setErrorModalVisible(true);
        setErrorMessage("网络错误，请检查网络连接");
      } else {
        setErrorModalVisible(true);
        setErrorMessage("请求设置错误，请稍后再试");
      }
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <FileCard>
        <Form
          name="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          size="large"
          style={{ width: 480 }}
          labelAlign="left"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <div className={styles.cardtitle}>用户登录</div>

          <Button
            type="default"
            onClick={() => router.back()}
            style={{
              position: "absolute",
              top: 20,
              left: 20,
              zIndex: 1,
            }}
          >
            <LeftOutlined /> 返回
          </Button>

          <Form.Item
            label={<span className={styles.text}>用户名 / 邮箱</span>}
            name="username"
            rules={[{ required: true, message: "请输入用户名或邮箱！" }]}
            style={{ marginBottom: 20 }}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入用户名或邮箱" />
          </Form.Item>

          <Form.Item
            label={<span className={styles.text}>密码</span>}
            name="password"
            rules={[{ required: true, message: "请输入密码！" }]}
            style={{ marginBottom: 20 }}
          >
            <Input.Password
              prefix={<LockOutlined />}
              placeholder="请输入密码"
              visibilityToggle={{
                visibleIcon: <EyeOutlined />,
                invisibleIcon: <EyeInvisibleOutlined />,
              }}
            />
          </Form.Item>

          <Form.Item
            name="agreement"
            valuePropName="checked"
            rules={[{ required: true, message: "请先阅读并同意服务许可" }]}
            wrapperCol={{ offset: 6, span: 18 }}
            style={{ marginBottom: 20 }}
          >
            <Checkbox>
              已阅读并同意{" "}
              <span
                style={{ fontWeight: "bold", cursor: "pointer" }}
                onClick={() => setIsModalVisible(true)}
              >
                服务许可
              </span>
            </Checkbox>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 18 }}>
            <Button type="default" htmlType="submit" block loading={loading}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </FileCard>
      <Modal
        title="服务许可协议"
        visible={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setIsModalVisible(false)}>
            关闭
          </Button>,
        ]}
      >
        <div style={{ whiteSpace: "pre-wrap" }}>
          {`
欢迎使用 微百合论坛 服务！
本协议是您（以下简称 “用户”）与小蓝鲸（以下简称 “我们”）之间关于使用本论坛服务的法律协议。请仔细阅读本协议条款，您使用本服务即表示同意接受全部条款约束。

第一条 定义
论坛服务：指我们通过 微百合论坛平台提供的信息发布、交流、互动等网络服务。
用户内容：指用户在论坛内发布的文字、图片、视频、链接等任何形式的内容。

第二条 服务内容
我们提供论坛注册、发帖、回帖、私信、社区管理等基础功能。
我们有权根据运营需要调整或终止部分服务（将提前通知用户）。

第三条 用户义务
合法性承诺：用户不得发布或传播以下内容：
违反法律法规、公序良俗的信息；
虚假、欺诈、色情、暴力、恐怖主义内容；
侵犯他人知识产权、隐私或名誉的内容；
广告、垃圾信息或其他未经允许的商业推广。
账号安全：用户需妥善保管账号密码，因账号泄露导致的损失由用户自行承担。

第四条 知识产权
用户保留其发布内容的所有权，但授予我们免费、永久、非独家的使用权（包括复制、修改、展示、分发等）。
论坛标志、界面设计、软件代码等知识产权归我们所有，未经授权不得使用。

第五条 免责声明
我们不保证服务的持续性、安全性或无缺陷，不承担因网络故障、第三方行为等导致的损失。
用户因使用论坛内容而产生的风险由用户自行承担。

第六条 隐私政策
我们将按照《隐私政策》处理用户个人信息，详情请查阅 [链接]。

第七条 协议修改
我们有权单方面修改本协议，修改后的条款将在论坛公告后生效。用户继续使用服务即视为接受修改后的协议。

第八条 服务终止
若用户违反本协议，我们有权暂停或永久封禁账号，且不退还已产生费用。
我们可因不可抗力、政府要求等原因终止服务。

第九条 争议解决
因本协议产生的争议，双方应友好协商；协商不成的，提交 [XX 市] 人民法院诉讼解决。

第十条 其他条款
本协议未提及事宜，以法律法规为准。
条款部分无效不影响其他条款效力。
`}
        </div>
      </Modal>

      <Modal
        title="提示"
        visible={errorModalVisible}
        onCancel={() => setErrorModalVisible(false)}
        footer={[
          <Button key="close" onClick={() => setErrorModalVisible(false)}>
            关闭
          </Button>,
        ]}
      >
        <div>{errorMessage}</div>
      </Modal>

      <Modal
        title="选择登录身份"
        visible={adminChoiceModalVisible}
        onCancel={() => setAdminChoiceModalVisible(false)}
        footer={
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <Button
              key="user"
              onClick={() => {
                setAdminChoiceModalVisible(false);
                router.push("/homepage/home");
              }}
            >
              以用户身份登录
            </Button>
            <Button
              key="admin"
              onClick={() => {
                setAdminChoiceModalVisible(false);
                router.push("/administrators");
              }}
            >
              以管理员身份登录
            </Button>
          </div>
        }
      >
        <div>您是管理员，您可以选择以用户身份登录或管理员身份登录。</div>
      </Modal>
    </div>
  );
}
